<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			bod y{
				width: 100%;
				height: 1000000px;
				background-image: url(img/4.jpg);
				background-size: contain;
				/* 函数cover 等比列放大图片  特点：原图按照比例放大存在背景空间
				【开发者：背景图大小是否等于背景空间】
				    contain 等比例缩放图片  特点：图片按照比缩放存背景空间
				【开发者：背景图大小是否等于背景空间】
				 */
				/* 背景附件--尺寸中存在cover或者contain */
				background-attachment: fixed;/*背景图固定*/
			}
			div{
				width: 300px;
				height: 300px;
				background-color: #e4393c;
				background-image: url(img/4.jpg);
				/* 问题：超大图-不显示  小图-显示
				   注意：背景空间大小，如果图小于背景空间--平铺
				 */
				background-repeat: no-repeat;
				/*不平铺 repeat-x/y 横/纵向平铺*/
				background-size: 30%;
				/* 背景尺寸属性值：数值px % | 函数 cover contain */
				/* 背景定位：背景空间一定大于背景图 关键字：center、left、right、top、bottom */
				background-position: 80% 0;
			}
		</style>
	</head>
	<body>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. A similique atque obcaecati ad, quo aperiam debitis enim dolore est ut libero praesentium esse optio! Quo quasi commodi voluptate voluptates adipisci.
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint iure dignissimos consequatur. Commodi molestiae, facilis obcaecati laboriosam animi enim cupiditate voluptas perspiciatis ad, voluptate dolorum ullam odio hic, aspernatur accusantium.
		Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit ipsam, assumenda fugit ea laboriosam deleniti adipisci nam deserunt molestias officiis architecto incidunt accusamus ex distinctio? Dolorem rem harum aliquam nostrum!
		Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsa, reiciendis cupiditate sit soluta natus eaque totam incidunt deleniti amet repellendus autem iste consequuntur hic repudiandae! Amet, mollitia sint. Velit, dolorum!
		<!--html img图片  引入一张图片，位置不可随意改变  
		    css  背景图片 引入一张图片，位置可以随意改变
			 子属性 background-color 背景颜色
			       background-image背景图
				   background-repeat背景重复
				   background-size背景尺寸
				   background-attachemt背景附件
				   background-position背景定位
			 复合属性 background :background-image  background-color  background-position
			                   background-size  background-repeat和background-attachemt
			 简写属性：background：background-image background-position|background-size
			 替换子属性：background-image  background-color background-repeat
			 -->
			 <div></div>
	</body>
</html>